<template>
  <div class="app">
    <a-menu
      id="dddddd"
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      style="width: 256px"
      mode="inline"
      @click="handleClick"
    >
      <a-sub-menu key="sub1" @titleClick="titleClick">
        <template #icon>
          <MailOutlined />
        </template>
        <template #title>vue基础</template>
        <a-menu-item-group key="g1">
          <template #icon>
            <QqOutlined />
          </template>
          <template #title>生命周期</template>
          <a-menu-item key="1">生命周期</a-menu-item>
        </a-menu-item-group>
        <a-menu-item-group key="g2">
          <template #title>响应性 API</template>
          <a-sub-menu key="sub4" title="响应性基础 API">
            <template #icon>
              <SettingOutlined />
            </template>
            <a-menu-item key="sub4_1">reactive</a-menu-item>
            <a-menu-item key="sub4_2">readonly</a-menu-item>
            <a-menu-item key="sub4_3">isProxy</a-menu-item>
            <a-menu-item key="sub4_4">isReactive</a-menu-item>
            <a-menu-item key="sub4_5">isReadonly</a-menu-item>
            <a-menu-item key="sub4_6">toRaw</a-menu-item>
            <a-menu-item key="sub4_7">markRaw</a-menu-item>
            <a-menu-item key="sub4_8">shallowReactive</a-menu-item>
            <a-menu-item key="sub4_9">shallowReadonly</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub5" title="Refs">
            <a-menu-item key="sub5_1">ref</a-menu-item>
            <a-menu-item key="sub5_2">unref</a-menu-item>
            <a-menu-item key="sub5_3">toRef</a-menu-item>
            <a-menu-item key="sub5_4">toRefs</a-menu-item>
            <a-menu-item key="sub5_5">isRef</a-menu-item>
            <a-menu-item key="sub5_6">customRef</a-menu-item>
            <a-menu-item key="sub5_7">shallowRef</a-menu-item>
            <a-menu-item key="sub5_8">triggerRef</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub6" title="Computed 与 watch">
            <a-menu-item key="sub6_1">computed</a-menu-item>
            <a-menu-item key="sub6_2">watchEffect</a-menu-item>
            <a-menu-item key="sub6_3">watchPostEffect </a-menu-item>
            <a-menu-item key="sub6_4">watchSyncEffect </a-menu-item>
            <a-menu-item key="sub6_5">watch</a-menu-item>
            <a-menu-item key="sub6_6">customRef</a-menu-item>
            <a-menu-item key="sub6_7">shallowRef</a-menu-item>
            <a-menu-item key="sub6_8">triggerRef</a-menu-item>
          </a-sub-menu>
        </a-menu-item-group>
      </a-sub-menu>
      <a-sub-menu key="sub2" @titleClick="titleClick">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <template #title>aa</template>
        <a-menu-item key="5">Option 5</a-menu-item>
        <a-menu-item key="6">Option 6</a-menu-item>
        <a-sub-menu key="sub3" title="Submenu">
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option 8</a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
    </a-menu>
    <div class="view-content">
      <router-view />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import {
  MailOutlined,
  QqOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import type { MenuProps } from "ant-design-vue";
export default defineComponent({
  components: {
    MailOutlined,
    QqOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },
  setup() {
    const selectedKeys = ref<string[]>(["1"]);
    const openKeys = ref<string[]>(["sub1"]);
    const handleClick: MenuProps["onClick"] = (e) => {
      console.log("click", e);
    };
    const titleClick = (e: Event) => {
      console.log("titleClick", e);
    };
    watch(
      () => openKeys,
      (val) => {
        console.log("openKeys", val);
      }
    );
    return {
      selectedKeys,
      openKeys,

      handleClick,
      titleClick,
    };
  },
});
</script>
<style scoped>
.app {
  display: flex;
}
.view-content {
  width: -webkit-fill-available;
}
</style>
